<template>
  <div class="Fg-ED-left" :style="{'--themeColor':themeColor,'--selectedColor':selectedColor,}">
    <div v-if="!disabled">
      <el-button type="text" icon="el-icon-plus" @click="onAdd">创建{{title}}</el-button>
    </div>
    <div class="FG-ED-list">
      <div
        class="FG-ED-item"
        :class="modelValue==i?'FG-ED-item--active':''"
        v-for="(item,i) in list"
        :key="i"
        @click="onClick(i)"
      >
        <span :style="{color:themeColor}">
          <span style="color:#9d238c">{{preText}}</span>
          <span>{{item.name}}</span>
        </span>
        <div class="FG-ED-button" v-if="!disabled">
          <i class="el-icon-delete" style="margin-left:5px;color:#f56c6c" @click="onDelete(i)"></i>
        </div>
      </div>

      <div class="FG-ED-item" v-if="cell">
        <el-input v-model="cell.name" size="mini"></el-input>
        <div class="FG-ED-button">
          <i class="el-icon-check" :style="{color:themeColor}" @click="onSave"></i>
          <i class="el-icon-delete" style="margin-left:5px;color:#f56c6c" @click="cell=null"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUuiKey } from "@/components/formGenerator/utils";
import store from "@/store";

export default {
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    preText: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cell: null,
    };
  },
  computed: {
    themeColor() {
      return store.state.app.themeColor;
    },
    selectedColor() {
      return store.state.app.selectedColor;
    },
  },
  methods: {
    onAdd() {
      if (this.cell) return;
      this.cell = { name: getUuiKey(), code: "" };
    },
    onSave() {
      if (!this.cell.name) return;
      this.list.push(this.cell);
      this.cell = null;
      this.onEmit(this.list.length - 1);
      this.$emit("update:list", this.list);
      this.$emit("onList", this.list);
    },
    onClick(i) {
      this.onEmit(i);
    },
    onDelete(i) {
      this.list.splice(i, i + 1);
      if (this.modelValue == i) this.onEmit(0);
      if (this.list.length == 0) this.onEmit("");
    },
    onEmit(i) {
      this.$emit("input", i);
    },
  },
};
</script>

<style lang="scss" scoped>
.Fg-ED-left {
  height: 100%;
  overflow: auto;
}
.FG-ED-list {
  .FG-ED-item {
    border: 1px solid var(--selectedColor);
    border-radius: 5px;
    // color: var(--themeColor);
    cursor: pointer;
    padding: 10px 16px;
    margin: 10px 0;
    padding-right: 60px;
    &:hover {
      background: var(--selectedColor);
    }
    position: relative;
    .FG-ED-button {
      position: absolute;
      right: 14px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .el-input__inner {
      border: none;
    }
  }
  .FG-ED-item--active {
    background: var(--selectedColor);
  }
}
</style>